<template>
  <el-table :data="data" border>
    <el-table-column prop="declares" label="名称" :width="180" />
    <el-table-column prop="label" label="标签" :width="180" />
    <el-table-column label="类型" :width="120">
      <template #default="{ row }">{{ columnTypeOptions[row.type] }}</template>
    </el-table-column>
    <el-table-column prop="element" label="元素" :width="150" />
    <el-table-column prop="elementProps" label="元素属性">
      <template #default="{ row }">{{ Object.keys(row.elementProps || {}).length > 0 ? JSON.stringify(row.elementProps) : '' }}</template>
    </el-table-column>
    <el-table-column label="操作" :width="55">
      <!-- <template #header>
        <OperateBar :operates="['add', 'batch-add','batch-edit']" @add="add" @batch-add="batchAdd" @batch-edit="batchEdit" />
      </template> -->
      <template #default="{ row }">
        <OperateBar :operates="['component']" @component="editElement(row.declares)" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
  import { getAction, getSeed } from '@/views/seed-dev'
  import { ElTable, ElTableColumn } from 'element-plus'
  import { computed } from 'vue';
  import { columnTypeOptions } from '@/views/types';
  import { ActionConfiguration, SeedConfiguration } from '@/views/dev-types';
  import { open } from '@/components/Popup';
  import { ActionElementEditor } from '..';
  import { formatDeclare, formatDeclares, getRawColumns } from '../../utils/DevSeedUtil';
  import { OperateBar } from '../../OperateBar';

  const props = defineProps<{seedName?: string, actionName: string}>()
  // const isSeedAction = computed(() => !!props.seedName)

  const data = computed(() => {
    let seed: SeedConfiguration
    let action: ActionConfiguration
    if(props.seedName) {
      seed = getSeed(props.seedName)
      action = seed.actions[props.actionName]
    } else {
      action = getAction(props.actionName)
      if(!action.seedName) return []

      seed = getSeed(action.seedName)
    }

    const ret = []
    const elements = action.elements || {}
    const declares: string[] = action.declares || seed.declares || Object.keys(seed.columns).filter(e => e != 'id')
    const formatedDeclares = formatDeclares(seed, declares, action.type == 'page')
    for(const declares of formatedDeclares) {
      const columns = getRawColumns(seed, declares)
      for(const declares in columns) {
        const column = columns[declares]
        const element = elements[declares]
        const item = {declares, label: column.label, type: column.type, element: void 0, elementProps: void 0}
        if(element?.element) item.element = element?.element
        if(element?.elementProps) item.elementProps = element?.elementProps

        ret.push(item)
      }
    }

    return ret
  })

  // function add() {
  //   open({title: '新增列'}, ActionColumnCreator, { seedName: props.seedName, actionName: props.actionName })
  // }

  // function batchAdd() {
  //   open({title: '批量重写列'}, ActionColumnBatchCreator, { seedName: props.seedName, actionName: props.actionName })
  // }

  // function batchEdit() {
  //   open({title: '批量编辑列'}, ActionColumnBatchEditor, { seedName: props.seedName, actionName: props.actionName })
  // }

  // function edit(declares: string) {
  //   open({title: '编辑列'}, ActionColumnEditor, { seedName: props.seedName, actionName: props.actionName, declares })
  // }

  function editElement(declares: string) {
    open({title: '编辑列元素', fullscreen: true}, ActionElementEditor, { seedName: props.seedName, actionName: props.actionName, declares })
  }

  // function remove(declares: string) {
  //   if(isSeedAction.value) {
  //     const seed = getSeed(props.seedName)
  //     delete seed.actions[props.actionName].elements[declares]
  //     return
  //   }

  //   delete getAction(props.actionName).elements[declares]
  // }

  // watch(() => data.value, () => save(name.value, data.value, props.seedName), { deep: true })
</script>